/*
 * @Author: hanyu
 * @Date: 2018-05-07 09:46:58 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-07-11 11:01:40
 */
<template>
    <div id="dashboard" style="min-height:200px;height:200px">
    </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图表宽高
      default: () => {
        return "";
      }
    }
  },
  data() {
    return {
      myChart: null,
      dataOption: {},
      noData: false,
      time: null
    };
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue.length === 0) {
        this.$set(this, "noData", true);
      } else {
        this.$set(this, "noData", false);
        this.setOption(newValue);
        this.time = setInterval(() => {
          this.setOption(newValue);
        }, 6000);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
  mounted() {
    this.setOption();
  },
  methods: {
    setOption(res) {
      var option = {
        backgroundColor: "transparent",
        series: [
          {
            type: "gauge",
            center: ["50%", "55%"],
            radius: "100%",
            detail: {
              formatter: function(params) {
                return params;
              },
              fontFamily: "DIN Condensed Bold"
            },
            axisLine: {
              lineStyle: {
                width: 14,
                shadowBlur: 0,
                color: [[0.3, "#2BE951"], [0.7, "#1EC2FF"], [1, "#FFD81A"]]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              distance: -15
            },
            data: [
              {
                value: 590
              }
            ]
          },
          {
            type: "gauge",
            center: ["13%", "55%"], // 默认全局居中
            radius: "60%",
            detail: {
              formatter: "{value}",
              fontFamily: "DIN Condensed Bold"
            },
            axisLine: {
              lineStyle: {
                width: 10,
                shadowBlur: 0,
                color: [[0.3, "#2BE951"], [0.7, "#1EC2FF"], [1, "#FFD81A"]]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: -15
            },
            pointer: {
              width: 3
            },
            data: [
              {
                value: 10
              }
            ]
          },
          {
            type: "gauge",
            center: ["85%", "55%"], // 默认全局居中
            radius: "60%",
            detail: {
              formatter: "{value}",
              fontFamily: "DIN Condensed Bold"
            },
            axisLine: {
              lineStyle: {
                width: 10,
                shadowBlur: 0,
                color: [[0.3, "#2BE951"], [0.7, "#1EC2FF"], [1, "#FFD81A"]]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: -15
            },
            pointer: {
              width: 3
            },
            data: [
              {
                value: 10
              }
            ]
          }
        ]
      };
      self.myChart = echarts.init(document.getElementById("dashboard"), null, {
        devicePixelRatio: 2
      });
      self.myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.noData {
  color: white;
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
}
</style>